<template>
    <div id="app">
         <div id="dingbu">
            <span id="wenxuan" @click="btnClick">‹</span>
            <span >文轩注册</span>
        </div>
        <div id="mima" >
           <span v-if="show">两次密码输入不一致</span> 
            </div>
        <div id="dl">
            <input type="name" name="name" v-model="usersname" placeholder="请输入注册用户名">
            <input type="password" @input="isInput" name="psw" v-model="psw" placeholder="设置密码">
            <input type="password" @input="isInput" v-model="confirm" placeholder="确认密码">
        </div>
        <br>
        <div id="btn">
            <button id="on" @click="registerClick">注册</button>
        </div>
        <br>
        <!--<div id="mima" v-if="show">两次密码输入不一致</div>-->
        <span id="yiyou" @click="btnClick">已有账号，去登陆></span>
    </div>
</template>

<script>
export default {
    data:function(){
        return {
            usersname:'',
            psw:'',
            confirm:"",
            show:false
        }
    },
    methods:{
        isInput(){
            if(this.psw==this.confirm){
                this.show=false;
            }else{
                this.show=true;
            }
        },
        btnClick:function(){

            location.href="#/My"
        },
         registerClick:function(){
        var data = {
            usersname:this.usersname,
            psw:this.psw,
        };
        // console.log(data)
        // this.$store.dispatch("regist",data);
        if(!this.show){
            this.http.post("/api/users/regist",data)
                .then(res=>{
                    // console.log(res.data)
                    
                })
                alert("注册成功")
                location.href="#/My"
        }
        
      
    }

    
    },
   
}
</script>

<style scoped>
    #app{
        width: 100vw;
        height: 100vh;
        background-color: #EEEEEE;
    }

    #dingbu{
        text-align: center;
        background-color: #FAFAFA;
        width: 100%;
        height: 40px;
        line-height: 40px;
    }
    #wenxuan{
        cursor: pointer;
        color: red;
        font-size: 40px;
        padding-left: 15px;
    float: left;
    }
     input{
        width: 100%;
        height: 30px;
    }
       #on{
        border: solid 1px #F41E33;
        width: 300px;
        height: 35px;
        background-color: #F41E33;
        border-radius: 10px;
        color: white;
        font-size: 15px
    }
    #btn{
        text-align: center;
    }
    #yiyou{
        cursor: pointer;
        float: right;
        padding-right: 10px;
        font-size: 14px;
    }
    #mima{
        height: 20px;
        text-align: center;
        font-size: 13px;
        color: red;
        margin: 8px;
    }
    #dl{
        /*padding-top: 20px;*/
    }
</style>